<script setup lang="ts">
import {onMounted, ref} from "vue";
import {detail, getShowList} from "@/api/more";
import LotteryView from "@/views/Wheel/lotteryView.vue";
import {showToast} from "vant";
import {LuckyDrawRecord} from "@/api/person/person";

// const list=ref<any>('')
// // let shopList= ref()
// getShowList().then(res=>{
//     // console.log(res)
//     if (res.code === 200){
//         list.value = res.rows
//
//     }
// })
LuckyDrawRecord().then(res=>{
    console.log(res)
})
let shopList=ref<any>('')
detail().then(res=>{
    console.log(res.data.prizeList)

    // shopList.value=res.data.prizeList
    if (res.code === 200){
        shopList.value = res.data.prizeList.map(item =>{
            item.turntableUrl = 'http://192.168.5.120:8199' + item.turntableUrl
            return item
        })
        shopList.value=shopList.value.slice(2,8)
    }
    console.log(shopList.value)
})
const box = ref()
const timeId=ref<any>(null)
const num = ref(0)
const timeId2 = ref<any>(null)
const flag=ref(true)
onMounted(()=>{
    box.value = document.querySelector('.turntable-button')
})
function start(){
    box.value.style.transform = `rotate(0deg)`
        // console.log(box.value)
        timeId2.value = setTimeout(()=>{
            clearInterval(timeId.value)
            clearTimeout(timeId2.value)
            console.log(num.value)
            console.log((num.value/360-Math.floor(num.value/360))*360)
            const aera=ref<any>((num.value/360-Math.floor(num.value/360))*360)
            console.log(aera.value)
           if(aera.value>330||aera.value<=30){
               showToast(`恭喜你获得${shopList.value[3].name}`);
           }else if(aera.value>30&&aera.value<=90){
               showToast(`恭喜你获得${shopList.value[4].name}`);
           }else if(aera.value>90&&aera.value<=150){
               showToast(`恭喜你获得${shopList.value[5].name}`);
           }else if(aera.value>150&&aera.value<=210){
               showToast(`恭喜你获得${shopList.value[0].name}`);
           }else if(aera.value>210&&aera.value<=270){
               showToast(`恭喜你获得${shopList.value[1].name}`);
           }else if (aera.value>270&&aera.value<=330){
               showToast(`恭喜你获得${shopList.value[2].name}`);
           }
            // if (aera.value<30||aera.value>330){
            //     showToast(`恭喜你获得${shopList[0].name}`);
            // }
            num.value=0

            // function find(){
            //     for (let i =0;i<arr.length,i++){
            //         if (res === arr[i]){
            //             return i
            //         }
            //     }
            // }
        },Math.floor(Math.random()*(7000-4000+1)+4000))
        timeId.value = setInterval(()=>{
            box.value.style.transform = `rotate(${num.value}deg)`
            if(num.value<=360){
                num.value +=3
            }else if(num.value>360&&num.value<=1000){
                num.value +=6
            }else if(num.value>1000&&num.value<=2000){
                num.value +=8
            }else if(num.value>2000&&num.value<=2500){
                num.value+=4
            }
            else if(num.value>2500&&num.value<=2700){
                num.value+=3
            }
            else{
                num.value+=1
            }
            console.log(num.value)
        },10)

}
</script>

<template>
    <!--    <button @click="bb">123123</button>-->
    <div>
        <!--大转盘-->
        <!--大转盘外圈-->
        <div class="turntable">
            <lottery-view></lottery-view>
            <!--大转盘内圈-->
            <div class="turntable-in" >
                <div class="circleBox" ref="a">
                    <div class="box1" v-for="(item,index) in shopList" :key="index">
<!--                        {{item.name}}-->
                        <img :src="item.turntableUrl" height="50px" width="50px">
                    </div>
                </div>
            </div>
            <!--大转盘按钮-->
            <div class="turntable-button" ref="btn" @click="start">按钮</div>
        </div>
    </div>
</template>

<style scoped lang="less">
//大转盘区域
//大转盘外圈
.turntable{
    width: 270px;
    height: 270px;
    margin: 55px auto 0;
    background-image: url("@/assets/images/转盘-外圈.png");
    background-size: 270px 270px;
    position: relative;

    //大转盘内圈
    .turntable-in{
        width: 214px;
        height: 214px;
        margin: auto ;
        //background-image: url("@/assets/images/组 9.png");
        background-size: 214px 214px;
        background-repeat: no-repeat;
        position: absolute;
        top: 28px;
        left: 28px;

        .circleBox{
            position: relative;
            width: 200px;
            height: 200px;
            margin: 8px auto 0px;
            font-size:16px;
            //border: 1px solid black;
            //border-radius: 50%;

            .box1{
                position: absolute;
                top: 80px;
                left: 90px;
                width: 30px;
                height: 10px;
                border-radius: 50%;
                font-size: 15px;
            }

            .box1:nth-child(1) {
                transform: rotate(0deg) translate(-13px ,70px);
            }

            .box1:nth-child(2) {
                transform: rotate(60deg) translate(0px,70px);
            }

            .box1:nth-child(3) {
                transform: rotate(117deg) translate(0px ,55px);
            }

            .box1:nth-child(4) {
                transform: rotate(185deg) translate(0px ,45px);
            }

            .box1:nth-child(5) {
                transform: rotate(250deg) translate(-10px ,45px);
            }

            .box1:nth-child(6) {
                transform: rotate(300deg) translate(-20px ,60px);
            }

        }

    }
}
.turntable-button {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 115px;
    height: 115px;
    margin: auto;
    background-image: url("@/assets/images/抽奖.png");
    background-size: 115px 115px;
    text-align: center;
    line-height: 120px;
}
</style>